Show Markup
<button class="spectrum-ActionButton">
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton is-selected">
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton" disabled>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton is-selected" disabled>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<br><br>
<button class="spectrum-ActionButton">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton is-selected">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton is-selected" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<br><br>
<button class="spectrum-ActionButton">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton is-selected">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton is-selected" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<br><br>
<button class="spectrum-ActionButton">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle" />
</svg>
</button>
<button class="spectrum-ActionButton is-selected">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle" />
</svg>
</button>
<button class="spectrum-ActionButton" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle" />
</svg>
</button>
<button class="spectrum-ActionButton is-selected" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle" />
</svg>
</button>
<br><br>
<button class="spectrum-ActionButton">
<svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
<g fill-rule="evenodd">
<path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
<polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
<polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
<polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
<polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
<polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
<polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
<polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
<polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
<polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
<polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
<polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
<polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
</g>
</svg>
<span class="spectrum-ActionButton-label">Button</span>
</button>
<button class="spectrum-ActionButton is-selected">
<svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
<g fill-rule="evenodd">
<path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
<polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
<polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
<polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
<polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
<polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
<polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
<polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
<polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
<polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
<polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
<polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
<polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
</g>
</svg>
<span class="spectrum-ActionButton-label">Button</span>
</button>
<button class="spectrum-ActionButton" disabled>
<svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
<g fill-rule="evenodd">
<path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
<polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
<polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
<polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
<polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
<polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
<polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
<polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
<polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
<polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
<polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
<polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
<polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
</g>
</svg>
<span class="spectrum-ActionButton-label">Button</span>
</button>
<button class="spectrum-ActionButton is-selected" disabled>
<svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
<g fill-rule="evenodd">
<path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
<polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
<polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
<polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
<polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
<polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
<polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
<polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
<polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
<polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
<polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
<polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
<polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
</g>
</svg>
<span class="spectrum-ActionButton-label">Button</span>
</button>